<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>冷链运输车环境监控系统</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			body {
				overflow: hidden;
				font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
				background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
				color: white;
			}


			header {
				grid-column: 1 / -1;
				text-align: center;
				/* padding: 20px 0; */
				background: rgba(0, 0, 0, 0.3);
				border-radius: 15px;
				margin-bottom: 10px;
				backdrop-filter: blur(10px);
				border: 1px solid rgba(255, 255, 255, 0.1);
				box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
			}

			.container {
				position: relative;
				height: 100vh;
				overflow: hidden;
				color: white;
			}

			.scroll-section {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				transition: transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 20px;
			}

			.section-content {
				width: 100%;
				height: 100%;
				border: none;
				background-color: #162441;
				border-radius: 12px;
				box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
				overflow: hidden;
			}

			.nav-indicator {
				position: fixed;
				right: 30px;
				top: 50%;
				transform: translateY(-50%);
				z-index: 1000;
			}

			.indicator-dot {
				width: 14px;
				height: 14px;
				border-radius: 50%;
				background-color: rgba(255, 255, 255, 0.5);
				margin: 15px 0;
				cursor: pointer;
				transition: all 0.3s ease;
			}

			.indicator-dot.active {
				background-color: white;
				transform: scale(1.4);
				box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
			}

			.header {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				padding: 20px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				z-index: 100;
				/* background: rgba(0, 0, 0, 0.5); */
				/* backdrop-filter: blur(10px); */
			}

			.logo {
				font-size: 1.8rem;
				font-weight: bold;
				background: linear-gradient(to right, #ff7e5f, #feb47b);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			.nav-links a {
				color: white;
				text-decoration: none;
				margin: 0 15px;
				font-weight: 500;
				transition: color 0.3s;
				padding: 8px 15px;
				border-radius: 20px;
			}

			.nav-links a:hover {
				background: rgba(255, 255, 255, 0.2);
			}

			.footer {
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100%;
				text-align: center;
				padding: 15px;
				font-size: 0.9rem;
				background: rgba(0, 0, 0, 0.5);
				backdrop-filter: blur(5px);
				z-index: 100;
			}

			.section-title {
				position: absolute;
				top: 20px;
				left: 20px;
				font-size: 1.5rem;
				font-weight: bold;
				background: linear-gradient(to right, #ff7e5f, #feb47b);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			@media (max-width: 768px) {
				.nav-links {
					display: none;
				}

				.nav-indicator {
					right: 15px;
				}

				.indicator-dot {
					width: 10px;
					height: 10px;
					margin: 10px 0;
				}
			}
		</style>
	</head>
	<body>
		<!-- <div class="header">
        <div class="logo">全屏滚动展示</div>
        <div class="nav-links">
            <a href="#" class="active">首页</a>
            <a href="#">产品</a>
            <a href="#">服务</a>
            <a href="#">关于</a>
            <a href="#">联系</a>
        </div>
    </div> -->

		<div class="container">
			<!-- 首页内容 -->
			<div class="scroll-section active" id="section0">
				<div class="section-title"></div>
				<div class="section-content">
					<div style="padding: 40px; text-align: center;">
						<header>
							<h1 style="font-size: 3rem; margin-bottom: 20px;background: linear-gradient(90deg, #00c9ff, #92fe9d);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent; ;">冷链运输车环境监控系统</h1>
						</header>
						<header>
							<p style="font-size: 2.2rem; max-width: 1000px; margin: 0 auto 30px; color: #8dc6ff;">
								系统介绍
							</p>
							<p style="font-size: 1.5rem; max-width: 1000px; margin: 0 auto 30px; color: #6690b9;">
								本系统专为保障冷链运输货物安全设计，提供全方位、可视化的环境与状态监控。
							</p>
							<p style="font-size: 1.5rem; max-width: 1000px; margin: 0 auto 30px; color: #6690b9;">
								监测系统包含三大页面：环境监测页 货物追踪页 货物姿态页
							</p>
							<p style="font-size: 1.5rem; max-width: 1000px; margin: 0 auto 30px; color: #6690b9;">
								系统通过多维度数据采集、无线传输与智能分析，实现运输过程全链条透明监管，确保药品、生鲜等温敏货物品质合规，降低损耗风险。
							</p>

						</header>
						<header>
							<div style="display: flex; justify-content: center; gap: 20px; margin: 80px;">
								<div
									style="background: linear-gradient(135deg, #3498db, #1abc9c); padding: 6%;margin: 30px; border-radius: 20px;width: 400px; height: 400px;">
									<h1>环境监测页</h1>
									<p>实时监控车厢核心参数，包括 CO₂浓度、空气温湿度、货物温度、车门开关次数、异常震动次数及光照变化次数（判断开箱/开盖）。关键指标超限即时告警。</p>
								</div>
								<div
									style="background: linear-gradient(135deg, #e74c3c, #e67e22);padding: 6%;  margin: 30px; border-radius: 20px;width: 400px; height: 400px;">
									<h1>货物追踪页</h1>
									<p>集成GPS/北斗定位模块，实时记录并在地图上显示货物精确地理位置，支持历史轨迹回放，实现全程可视化追踪。</p>
								</div>
								<div
									style="background: linear-gradient(135deg, #9b59b6, #34495e); padding:6%;  margin: 30px; border-radius: 20px; width: 400px;height: 400px;">
									<h1>货物姿态页</h1>
									<p>通过高精度传感器监测货物的 三维倾角、加速度及姿态变化，有效识别货物在途是否发生倾倒、跌落或剧烈碰撞，保障易损品安全。</p>
								</div>
							</div>
						</header>
						<div style="margin-top: 50px; font-size: 1rem; color: #7f8c8d;">
							<p>向下滚动鼠标查看页面详情</p>
							<div style="font-size: 2rem; margin-top: 10px;">↓</div>
						</div>
					</div>
				</div>
			</div>

			<!-- Page 1 内容 -->
			<div class="scroll-section" id="section1">
				<div class="section-title"></div>
				<iframe src="Data.html" class="section-content"></iframe>
			</div>

			<!-- Page 2 内容 -->
			<div class="scroll-section" id="section2">
				<div class="section-title"></div>
				<iframe src="map.html" class="section-content"></iframe>
			</div>

			<!-- Page 3 内容 -->
			<div class="scroll-section" id="section3">
				<div class="section-title"></div>
				<iframe src="MPU6050.html" class="section-content"></iframe>
			</div>

			<div class="scroll-section" id="section3">
				<div class="section-title"></div>
				<iframe src="model.html" class="section-content"></iframe>
			</div>
		</div>

		<div class="nav-indicator">
			<div class="indicator-dot active" data-index="0"></div>
			<div class="indicator-dot" data-index="1"></div>
			<div class="indicator-dot" data-index="2"></div>
			<div class="indicator-dot" data-index="3"></div>
			<div class="indicator-dot" data-index="4"></div>
		</div>

		<!-- <div class="footer">
        © 2023 全屏滚动页面展示 | 使用鼠标滚轮切换页面
    </div> -->

		<script>
			document.addEventListener('DOMContentLoaded', function() {
				const sections = document.querySelectorAll('.scroll-section');
				const dots = document.querySelectorAll('.indicator-dot');
				let currentIndex = 0;
				let isScrolling = false;

				// 初始化页面位置
				sections.forEach((section, index) => {
					section.style.transform = `translateY(${index * 100}%)`;
				});

				// 导航点点击事件
				dots.forEach(dot => {
					dot.addEventListener('click', function() {
						const index = parseInt(this.getAttribute('data-index'));
						scrollToSection(index);
					});
				});

				// 滚轮事件
				window.addEventListener('wheel', function(e) {
					if (isScrolling) return;

					if (e.deltaY > 0) {
						// 向下滚动
						if (currentIndex < sections.length - 1) {
							scrollToSection(currentIndex + 1);
						}
					} else {
						// 向上滚动
						if (currentIndex > 0) {
							scrollToSection(currentIndex - 1);
						}
					}
				});

				// 滚动到指定部分
				function scrollToSection(index) {
					if (index < 0 || index >= sections.length) return;

					isScrolling = true;
					currentIndex = index;

					// 更新位置
					sections.forEach((section, i) => {
						section.style.transform = `translateY(${(i - index) * 100}%)`;
					});

					// 更新活动指示点
					dots.forEach((dot, i) => {
						if (i === index) {
							dot.classList.add('active');
						} else {
							dot.classList.remove('active');
						}
					});

					// 添加活动类
					sections.forEach((section, i) => {
						if (i === index) {
							section.classList.add('active');
						} else {
							section.classList.remove('active');
						}
					});

					// 防止滚动冲突
					setTimeout(() => {
						isScrolling = false;
					}, 100);
				}

				// 键盘事件支持
				document.addEventListener('keydown', function(e) {
					if (isScrolling) return;

					if (e.key === 'ArrowDown' && currentIndex < sections.length - 1) {
						scrollToSection(currentIndex + 1);
					} else if (e.key === 'ArrowUp' && currentIndex > 0) {
						scrollToSection(currentIndex - 1);
					}
				});
			});
		</script>
	</body>
</html>